import React, { Component } from 'react';
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
import PropTypes from 'prop-types';

class Index extends Component {
	static defaultProps = {
		banners: []
	}
	static propTypes = {
		banners: PropTypes.array.isRequired
	}
	initSwiper() {
		var mySwiper = new Swiper('.swiper-container', {
			loop: true, // 循环模式选项
			autoplay: true,
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},	
		})
	}
	componentDidMount() {
		this.initSwiper()
	}
	componentDidUpdate() {
		console.log(1);
		this.initSwiper()
	}
	render() {
		const { banners } = this.props
		return (
			<div className="swiper-container" style={{ height: 200 }}>
				<div className="swiper-wrapper">
					{
						banners.length > 0 && banners.map((v, i) => {
							return <div className="swiper-slide" key={i}>
								<img src={v} alt="" style={{ height: '100%', width: '100%' }} />
							</div>
						})
					}
				</div>
				<div className="swiper-pagination"></div>
			</div>
		);
	}
}

export default Index;
